<template>
  <div class='concup'>
    <h3>
      <span>{{merchantText.value}}分享知识数量：</span>
      <span>{{total}}</span>
    </h3>
    <div class='conditions'>
      <div class="leftBox">
        <el-input v-model="listQuery.keyword"  placeholder="请输入知识名称"></el-input>
        <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
      </div>
      <div  class="rightBox">
        <el-button @click="addCont" class="addBtn" type="primary">添加内容</el-button>
      </div>
    </div>


    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="标题">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签">
        <template slot-scope="scope">
          <el-button v-for="(item,index) in scope.row.tags" :key="index">{{item.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="阅读量">
        <template slot-scope="scope">
          <span>{{scope.row.visit}}</span>
        </template>
      </el-table-column>     
      <el-table-column label="分享时间">
        <template slot-scope="scope">
          <div>{{changeTime(scope.row.createTime)}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
          <template slot-scope="scope">
              <el-button class='defaultBtn' @click='goDetails(scope.row)' type="text">编辑</el-button>
              <el-button class='defaultBtn' @click='goDel(scope.row)' type="text">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div class='paginationBox'>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="1" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
  </div>
</template>


<script>
import Vue from 'vue';
import { getToken } from '@/utils/auth';
import { parseTime, showDecimal } from '@/utils/index';
import {list,del} from '@/api/culture'
  export default {
      props:['id','userId'],
    data() {
      return {
        text_0:'',
        coupon:{},
        text:'',
        merchantText:{
          value:''
        },
        selectedOptions3:"",
        total:0,
        tableData:[],
        listQuery:{
            keyword:'',
            page:0,
            limit:10,
            managerId:0,
            userId:0        
        },
      }
    },
    methods:{
      search(){
         this.funGetList();
      },
        addCont(){
          this.$router.push({name:'userAddContent',query:{managerId:this.id,userId:this.userId}});
          console.log(this.id,this.userId,'id') 
        },
        changeTime(time){
          return parseTime(time)
        },
      goDel(row){
          this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              del({targetId:row.id,token:getToken()}).then((json) => {
                if(json.status === 200){
                    this.funGetList();
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
        dynamicText(text){
          Vue.set(this.merchantText,'value',text);
        },
        //编辑
        goDetails(data){
          this.$router.push({name:'userAddContent',query:{ managerId:this.id,id:data.id}});
        },
        funGetList(){
          this.listQuery.managerId=this.id;
          this.listQuery.userId=this.userId
         list(this.listQuery).then((json) => {
            if(json.status === 200){
              this.total = json.total;
              this.tableData = json.data;
            }
          });
        },
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.funGetList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val-1;
            this.funGetList();
        }
    },
    created(){
      this.funGetList();
    }
  }

</script>



<style lang="scss" scoped>
  .concup {
    margin-top: 55px;
    background: #fff;
    padding: 25px 29px;
    .failed{
      color: #be1a21;
    }
    .imgBox {
      width: 36px;
      height: 36px;
      img {
       width: 100%;
       height: 100%;
      }
    }

    .defaultBtn{
      color: #409eff;
    }

    h3 {
      color: rgba(45, 45, 45, 1);
      font-size: 22px;
      margin-bottom: 19px;
      font-weight: 400;

      span:last-child {
        color: rgba(190, 26, 33, 1);
      }
    }

    .conditions {
      display: flex;
      justify-content: space-between;

      margin-bottom: 31px;
      .leftBox{
        width: 21%;
        display: flex;
        justify-content: space-between;
        .el-input {
          width: 67%;
        }
        .el-button{
            background: #be1a21;
            color: #fff;
            border: 1px solid #be1a21;
        }
        .el-select{
            width: 15%;
        }
      }
      .rightBox{
        .addBtn{
          background: #be1a21;
          color: #fff;
          border: 1px solid #be1a21;
        }
      }

    }

    .paginationBox{
        text-align: right;
        margin-top: 60px;
    }
  }
</style>
